<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>前十种类扇形图</title>
</head>
<body>
    <div th:replace="~{common/leftnavbar::leftnav}"></div>
    <div class="layui-body" id="barChart" style="padding-top: 30px;padding-left:68px;">
        <!--<div style="weight:700px;height:700px;" id="container"></div>-->
    </div>
</body>
<script th:inline="javascript">

    // 从JSON数据中提取横坐标（category）和纵坐标（clickCount, orderCount, payCount）
    var categories = [];
    var clickCounts = [];
    var orderCounts = [];
    var payCounts = [];

    // 初始化ECharts实例
    var chart = echarts.init(document.getElementById('barChart'));
    axios.get('/topten_category')
        .then(function (res) {
            console.log(res.data)
            for(var i = 0;i < res.data.length;i++){
                categories.push('商品ID-'+res.data[i].categoryid)
                clickCounts.push(res.data[i].clickCount)
                orderCounts.push(res.data[i].orderCount)
                payCounts.push(res.data[i].payCount)
            }
            var option = {
                title: {
                    text: 'Top10热门品类',
                    x: 'center'
                },
                xAxis: {
                    type:'value'
                },
                yAxis: {
                    type: 'category',
                    data: categories
                },
                series: [
                    {
                        name: '点击量',
                        type: 'bar',
                        data: clickCounts
                    },
                    {
                        name: '下单量',
                        type: 'bar',
                        data: orderCounts
                    },
                    {
                        name: '支付量',
                        type: 'bar',
                        data: payCounts
                    }
                ],
                tooltip: {
                    trigger: 'axis', // 使用坐标轴触发提示
                    axisPointer: {
                        type: 'cross' // 使用十字准星指示器
                    }
                },
            };

            // 使用配置项绘制图表
            chart.setOption(option);
            chart.on('mousemove', function (params) {
                if (params.componentType === 'series') {
                    // 获取横坐标和纵坐标的信息
                    var xValue = params.value; // x轴数值
                    var yValue = params.name; // y轴类别
                    console.log('X: ' + xValue + ', Y: ' + yValue);
                }
            });
        })
    // 配置项
</script>
</html>